<H2>复杂的页面布局 - Complex Layoutt</H2>
<DIV> 布局面板将显示窗口分为上(north)、右(east)、下(south)、左(west)、中(center)五个方位，在实际使用时可以根据自己需要，不用全部创建出来。(因为显示需要与实际范例有所不同。)</DIV>
<script>
		$(function(){
			$('#tt2').datagrid({
				title:'My Title',
				iconCls:'icon-save',
				width:600,
				height:350,
				nowrap: false,
				striped: true,
				fit: true,
				url:'documentation/datagrid_data.json',
				sortName: 'code',
				sortOrder: 'desc',
				idField:'code',
				frozenColumns:[[
	                {field:'ck',checkbox:true},
	                {title:'code',field:'code',width:80,sortable:true}
				]],
				columns:[[
			        {title:'Base Information',colspan:3},
					{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
						formatter:function(value,rec){
							return '<span style="color:red">Edit Delete</span>';
						}
					}
				],[
					{field:'name',title:'Name',width:120},
					{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
					{field:'col4',title:'Col41',width:150,rowspan:2}
				]],
				pagination:true,
				rownumbers:true
			});
		});
	</script>

<div class="easyui-layout"  style="width:800px;height:600px;">
  <div data-options="region:'north',split:true" title="North Title" style="height:100px;padding:10px;">
    <p>The north content.</p>
  </div>
  <div data-options="region:'south',split:true" title="South Title" style="height:100px;padding:10px;background:#efefef;">
    <div class="easyui-layout" data-options="fit:true" style="background:#ccc;">
      <div data-options="region:'center'">sub center</div>
      <div data-options="region:'east',split:true" style="width:200px;">sub center</div>
    </div>
  </div>
  <div data-options="region:'east',iconCls:'icon-reload',split:true" title="Tree Menu" style="width:180px;">
    <ul class="easyui-tree" data-options="url:'tree_data.json'">
    </ul>
  </div>
  <div data-options="region:'west',split:true" title="West Menu" style="width:180px;padding1:1px;overflow:hidden;">
    <div class="easyui-accordion" data-options="fit:true,border:false">
      <div title="Title1" style="padding:10px;overflow:auto;">
        <p>content1</p>
        <p>content1</p>
        <p>content1</p>
        <p>content1</p>
        <p>content1</p>
        <p>content1</p>
        <p>content1</p>
        <p>content12</p>
      </div>
      <div title="Title2" data-options="selected:true" style="padding:10px;"> content2 </div>
      <div title="Title3" style="padding:10px"> content3 </div>
    </div>
  </div>
  <div data-options="region:'center'" title="Main Title" style="overflow:hidden;">
    <div class="easyui-tabs" data-options="fit:true,border:false">
      <div title="Tab1" style="padding:20px;overflow:hidden;">
        <div style="margin-top:20px;">
          <h3>jQuery EasyUI框架帮助您构建您的web页面很容易。</h3>
          <ul>
            <li>easyui是一组基于jQuery的用户界面插件。 </li>
            <li>使用easyui你不写很多javascript代码,而你也不用通过编写HTML标签来定义用户界面。 </li>
            <li>easyui非常简单但强大的。 </li>
          </ul>
        </div>
      </div>
      <div title="Tab2" data-options="closable:true" style="padding:20px;">This is Tab2 width close button.</div>
      <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="overflow:hidden;padding:5px;">
        <table id="tt2">
        </table>
      </div>
    </div>
  </div>
</div>
<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;Complex Layout - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&gt;
		$(function(){
			$('#tt2').datagrid({
				title:'My Title',
				iconCls:'icon-save',
				width:600,
				height:350,
				nowrap: false,
				striped: true,
				fit: true,
				url:'datagrid_data.json',
				sortName: 'code',
				sortOrder: 'desc',
				idField:'code',
				frozenColumns:[[
	                {field:'ck',checkbox:true},
	                {title:'code',field:'code',width:80,sortable:true}
				]],
				columns:[[
			        {title:'Base Information',colspan:3},
					{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
						formatter:function(value,rec){
							return '&lt;span style=&quot;color:red&quot;&gt;Edit Delete&lt;/span&gt;';
						}
					}
				],[
					{field:'name',title:'Name',width:120},
					{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
					{field:'col4',title:'Col41',width:150,rowspan:2}
				]],
				pagination:true,
				rownumbers:true
			});
		});
	&lt;/script&gt;
&lt;/head&gt;
&lt;body class=&quot;easyui-layout&quot;&gt;
	&lt;div data-options=&quot;region:'north',split:true&quot; title=&quot;North Title&quot; style=&quot;height:100px;padding:10px;&quot;&gt;
		&lt;p&gt;The north content.&lt;/p&gt;
	&lt;/div&gt;
	&lt;div data-options=&quot;region:'south',split:true&quot; title=&quot;South Title&quot; style=&quot;height:100px;padding:10px;background:#efefef;&quot;&gt;
		&lt;div class=&quot;easyui-layout&quot; data-options=&quot;fit:true&quot; style=&quot;background:#ccc;&quot;&gt;
			&lt;div data-options=&quot;region:'center'&quot;&gt;sub center&lt;/div&gt;
			&lt;div data-options=&quot;region:'east',split:true&quot; style=&quot;width:200px;&quot;&gt;sub center&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-options=&quot;region:'east',iconCls:'icon-reload',split:true&quot; title=&quot;Tree Menu&quot; style=&quot;width:180px;&quot;&gt;
		&lt;ul class=&quot;easyui-tree&quot; data-options=&quot;url:'tree_data.json'&quot;&gt;&lt;/ul&gt;
	&lt;/div&gt;
	&lt;div data-options=&quot;region:'west',split:true&quot; title=&quot;West Menu&quot; style=&quot;width:280px;padding1:1px;overflow:hidden;&quot;&gt;
		&lt;div class=&quot;easyui-accordion&quot; data-options=&quot;fit:true,border:false&quot;&gt;
			&lt;div title=&quot;Title1&quot; style=&quot;padding:10px;overflow:auto;&quot;&gt;
				&lt;p&gt;content1&lt;/p&gt;
				&lt;p&gt;content1&lt;/p&gt;
				&lt;p&gt;content1&lt;/p&gt;
				&lt;p&gt;content1&lt;/p&gt;
				&lt;p&gt;content1&lt;/p&gt;
				&lt;p&gt;content1&lt;/p&gt;
				&lt;p&gt;content1&lt;/p&gt;
				&lt;p&gt;content12&lt;/p&gt;
			&lt;/div&gt;
			&lt;div title=&quot;Title2&quot; data-options=&quot;selected:true&quot; style=&quot;padding:10px;&quot;&gt;
				content2
			&lt;/div&gt;
			&lt;div title=&quot;Title3&quot; style=&quot;padding:10px&quot;&gt;
				content3
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div data-options=&quot;region:'center'&quot; title=&quot;Main Title&quot; style=&quot;overflow:hidden;&quot;&gt;
		&lt;div class=&quot;easyui-tabs&quot; data-options=&quot;fit:true,border:false&quot;&gt;
			&lt;div title=&quot;Tab1&quot; style=&quot;padding:20px;overflow:hidden;&quot;&gt; 
			  &lt;div style=&quot;margin-top:20px;&quot;&gt;
				&lt;h3&gt;jQuery EasyUI框架帮助您构建您的web页面很容易。&lt;/h3&gt;
				  &lt;ul&gt;
					  &lt;li&gt;easyui是一组基于jQuery的用户界面插件。
&lt;/li&gt; 
					  &lt;li&gt;使用easyui你不写很多javascript代码,而你也不用通过编写HTML标签来定义用户界面。
&lt;/li&gt; 
					  &lt;li&gt;easyui非常简单但强大的。
&lt;/li&gt; 
				  &lt;/ul&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div title=&quot;Tab2&quot; data-options=&quot;closable:true&quot; style=&quot;padding:20px;&quot;&gt;This is Tab2 width close button.&lt;/div&gt;
			&lt;div title=&quot;Tab3&quot; data-options=&quot;iconCls:'icon-reload',closable:true&quot; style=&quot;overflow:hidden;padding:5px;&quot;&gt;
				&lt;table id=&quot;tt2&quot;&gt;&lt;/table&gt; 
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>